<template>
  <div class="sendFeedBack">
    <header>
      <span class="back" @click="$router.back(-1)">
        <svg-icon icon-class="back"></svg-icon>
      </span>
      <h1>Feedback</h1>
      <router-link
        :to="{ name: 'myFeedback' }"
        class="record"
        :class="{ dot: feedbackNum }"
        >Record</router-link
      >
    </header>
    <div v-if="userInfo" class="main">
      <h3 class="title">Question</h3>
      <div class="feedback-text">
        <mt-field
          label=""
          placeholder="Leave your feedback here.(required)"
          type="textarea"
          rows="6"
          v-model="params.feedbackContent"
        ></mt-field>
      </div>
      <div class="feedback-email">
        <mt-field
          label=""
          placeholder="Write your email adderess here."
          type="email"
          v-model="params.email"
        ></mt-field>
      </div>
      <mt-button
        @click="sendFeedBack"
        class="submit"
        :disabled="disabledSubmit"
        size="large"
        >Submit</mt-button
      >
      <a
        class="toFacebookPage"
        :href="url"
        target="_blank"
        rel="noopener noreferrer"
        >Give us screensho feedback on Facebook >
      </a>
      <p class="userId" v-text="userInfo && userInfo.authorId"></p>
    </div>
    <div v-else class="to-login">
      <mt-button class="login-btn" @click="toLogin">Login</mt-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      params: {
        feedbackContent: "", //反馈内容
        email: "",
      },
      feedbackNum: 0, //未读反馈数量
      url: "https://www.facebook.com/FishNovel-246415817262219",
    };
  },
  components: {},
  computed: {
    ...mapGetters(["userInfo"]),
    //禁用Submit按钮
    disabledSubmit() {
      if (this.checkSpecialKey(this.params.feedbackContent)) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getNoReadFeedbackCount();
  },
  methods: {
    ...mapMutations({
      setShowPopup: "SET_SHOW_POPUP",
      setCurrentPopup: "SET_CURRENT_POPUP",
    }),
    // 获取反馈数量
    async getNoReadFeedbackCount() {
      let res = await this.$api.home.getNoReadFeedbackCount({});
      if (res.code === 1) {
        this.feedbackNum = res.source;
      }
    },
    // 发送反馈
    async sendFeedBack() {
      let res = await this.$api.home.sendFeedBack(this.params);
      if (res.code === 1) {
        Toast("Successful");
        this.params = {
          feedbackContent: "",
          email: "",
        };
      }
    },
    // 去登录
    toLogin() {
      this.setCurrentPopup({ currentPopup: "login" });
      this.setShowPopup(true);
    },
    // 校验输入框
    checkSpecialKey(str) {
      if (str.trim() != "") {
        let specialKey =
          "[`~!@#$%^&*()_-=+|{}':;'\\[\\].<>《》/?~！#￥……&*（）——|{}【】‘；：”“'\"。，、？]‘'";
        for (let i = 0; i < str.length; i++) {
          if (specialKey.indexOf(str.substr(i, 1)) == -1) {
            return true;
          }
        }
        return false;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sendFeedBack {
  > header {
    padding: 45px 32px 70px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back {
      .svg-icon {
        width: 56px;
        height: 56px;
      }
    }
    > h1 {
      font-size: 34px;
      color: #333333;
    }
    > .record {
      font-weight: 500;
      font-size: 30px;
      color: #999999;
      position: relative;
      &.dot::after {
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        top: -16px;
        right: -16px;
        border-radius: 16px;
        background: #e86472;
      }
    }
  }
  > .main {
    padding: 0 32px;
    > h3.title {
      font-size: 32px;
      color: #333333;
      line-height: 53px;
    }
    .feedback-text {
      margin-top: 7px;
      ::v-deep.mint-cell-wrapper {
        font-size: 28px;
      }
    }
    .feedback-email {
      margin-top: 48px;
      ::v-deep.mint-cell-wrapper {
        font-size: 28px;
      }
    }
    .submit {
      height: 100px;
      margin-top: 160px;
      font-size: 34px;
      color: #ffffff;
      font-weight: 500;
      border-radius: 20px;
      background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
      &.is-disabled {
        background: #999999;
      }
    }
    .toFacebookPage {
      display: block;
      margin-top: 48px;
      font-size: 28px;
      color: #e86472;
      line-height: 40px;
    }
    .userId {
      text-align: center;
      line-height: 40px;
      margin-top: 180px;
      font-size: 28px;
      color: #333333;
      &::before {
        content: "UserID:";
        margin-right: 12px;
      }
    }
  }
  > .to-login {
    .login-btn {
      width: 320px;
      height: 80px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      color: #ffffff;
      font-weight: 500;
      border-radius: 20px;
      font-size: 34px;
      background: linear-gradient(90deg, #ef6a59 0%, #e25177 100%);
    }
  }
  &::after {
    content: attr(userID-content);
    position: absolute;
    bottom: 78px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 28px;
    color: #333333;
    text-align: center;
  }
}
</style>
